<template> 
    <div>
        <Form ref="formValidate" :model="formValidate" :label-width="100" :rules="ruleValidate">
            <FormItem label="教师" prop="user_id">
                <div @click="othermodule=true">
                <RadioGroup v-model="formValidate.user_id" type="button" size="large">
                        <Radio :label="formValidate.user_id">{{username}}</Radio>
                    </RadioGroup>
                </div>
            </FormItem>

            <FormItem label="IP地址" prop="device_ip">
                <Select placeholder="请选择IP地址" v-model="formValidate.device_ip">
                    <Option v-for="item in IPist" :value="item.ip" :key="item.ip">{{ item.area }}</Option>
                </Select>
            </FormItem>
            <FormItem label="类型" prop="alert">
                <Select placeholder="请选择类型" v-model="formValidate.alert">
                    <Option v-for="item in TypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="时间段" prop="dayid">
                <Select placeholder="请选择时间段" v-model="formValidate.dayid">
                    <Option v-for="item in TimeList" :value="item.id" :key="item.id">{{ item.time_an }}--{{ item.time_en }}({{ (item.type==1) ? '上午' : (item.type==2 ? '中午' : (item.type==3 ? '下午' :'晚自习')) }})--{{item.semester.semester_name.zh}}</Option>
                </Select>
            </FormItem>
            <FormItem label="时间" prop="auth_time">
                <DatePicker  @on-change="shijianfun"  v-model="formValidate.auth_time"  type="datetime"  placeholder="请选择时间" style="width:100%"></DatePicker>

            </FormItem>
            
            <FormItem label="备注" prop="remarks">
                <Input v-model="formValidate.remarks" placeholder="请填写备注"></Input>
            </FormItem>
            <div style="width:90%;">
                <FormItem style="width:100%;">
                    <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                </FormItem>
            </div>
            <div style="clear:both"></div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Form> 
        <Modal v-model="othermodule" title="请选择教师" width="350" slot="others">
            <teacher-s-module @on-select="othermodulebutton"></teacher-s-module>
        </Modal>  

    </div>
</template>
<script>
  export default {
    props: {
        infoId: {
            type: [String,Number,Boolean],
            default: false
        }
    },
    components: {
        TeacherSModule: resolve => {require(['&/Authpub/TeacherSModule.vue'], resolve);},
    },
    data() {
      return {
        username:'请选择教师',
        othermodule:false,
        spinShow:false,

        infoUrl:`api/teacher/v1/certifications/find/${this.infoId}`,//请求单条数据
        saveUrl:'',//保存接口
        saveType:null,//保存方式

        IPist:[],//ip数据
        TypeList:[
            {
              id:1,
              name:'正常'
            },
            {
              id:2,
              name:'迟到'
            },
            {
              id:3,
              name:'早退'
            },
            {
              id:4,
              name:'旷工'
            },
            {
              id:5,
              name:'提前打卡'
            },
        ],//类型
        TimeList:[],//时间段
        infoOld:null,//单挑查询数据

        formValidate: {
            department_id:null,//部门id
            position_id:null,//岗位id
            user_id:null,//教师id
            device_ip:null,//ip地址
            alert:null,//类型
            dayid:null,//时间段
            auth_time:null,//时间
            remarks :'',  //备注        
        },
        ruleValidate: {
              user_id: [
                { type:'number',required: true, message: '请选择教师', trigger: 'change' }
              ],
              device_ip: [
                { required: true, message: '请选择IP地址', trigger: 'change' }
              ],
              alert: [
                { type:'number',required: true, message: '请选择类型', trigger: 'change' }
              ],
              dayid: [
                { type:'number',required: true, message: '请选择时间段', trigger: 'change' }
              ],
          
        },

      }
    },
    methods: {

        // ============================
        // 提交时 
        // ============================ 
        handleSubmit (name) {
            if(!this.formValidate.auth_time){
                this.$Message.error('请选择时间');
                return
            }
            this.$refs[name].validate((valid) => {
                if (valid) { 
                    let form= JSON.parse(JSON.stringify(this.formValidate))
                    this.spinShow=true//输入框禁用
                    this.saveType(this.saveUrl,form).then(val=>{
                        this.$emit('showParent',false)
                        this.$emit('backList',true)
                        this.$Message.success(val.message);
                        this.spinShow=false
                    }).catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow=false
                    }) 
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },

        /************************************************************
         * 
         * 点击教师请求列表数据
         * 
         ************************************************************/
        othermodulebutton(val){
            this.username=val.teacher_name.zh
            this.formValidate.department_id= val.department_id//部门id	
            this.formValidate.position_id= val.department_position_id//岗位id	
            this.formValidate.user_id= val.teacher_id//教师id
            this.othermodule=false
        },

        /************************************************************
         * 
         * 时间格式化
         * 
         ************************************************************/
        shijianfun(time){
            this.formValidate.auth_time=time
        },

        /************************************************************
         * 
         * 单条数据请求
         * 
         ************************************************************/
        infoData(){
            this.spinShow=true//输入框禁用
            this.$http.get(this.infoUrl).then(val=>{  
                this.infoOld = JSON.parse(JSON.stringify(val.data))
                this.formValidate.department_id=this.infoOld.department_id,//部门id
                this.formValidate.position_id=this.infoOld.position_id,//岗位id
                this.formValidate.user_id=this.infoOld.user_id,//教师id
                this.formValidate.device_ip=this.infoOld.device_ip,//ip地址
                this.formValidate.alert=parseInt(this.infoOld.alert),//类型
                this.formValidate.dayid=parseInt(this.infoOld.dayid),//时间段
                this.shijianfun(this.infoOld.auth_time),//时间段
                this.formValidate.remarks =this.infoOld.remarks,  //备注   
                this.username=this.infoOld.user_name.name.zh
                this.spinShow=false
            }).catch(err => {
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false//输入框禁用      
            }); 
        },

    },
    created() {
        this.spinShow=true
        if(this.infoId==false){
            // add
            this.saveUrl='api/teacher/v1/certifications/add'
            this.saveType=this.$http.post

        }else{
            // edit
            this.infoData();
            this.saveUrl=`api/teacher/v1/certifications/edit/${this.infoId}`
            this.saveType=this.$http.put
        }
        
        /************************************************************
         * 
         * ip数据
         * 
         ************************************************************/
        this.$http.get('api/safety/v1/get/safety/devicelist')
        .then(res=> {
            this.IPist = res.data   
            this.spinShow=false        
        })
        .catch(err => {
            if(err.code && err.code==422) {
                this.$Message.error(err.message);
            } 
            this.spinShow=false      
        }); 

        /************************************************************
         * 
         * 时间段
         * 
         ************************************************************/
        this.$http.get('api/teacher/v1/certificationdedey/list')
        .then(res=> {
            this.TimeList = res.data 
            this.spinShow=false  
        })
        .catch(err => {
            if(err.code && err.code==422) {
                this.$Message.error(err.message);
            }
            this.spinShow=false        
        }); 

    },
  }
</script>